import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import './colors.dart' as color;
import 'package:flutter/rendering.dart';

class TrainingIndex extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: color.AppColor.homePageBackground,
        body: Container(
            padding: const EdgeInsets.only(top: 70, left: 30, right: 30),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text('Training',
                        style: TextStyle(
                            fontSize: 30,
                            color: color.AppColor.homePageTitle,
                            fontWeight: FontWeight.w700)),
                    Row(
                      children: [
                        Icon(Icons.arrow_back_ios,
                            size: 20, color: color.AppColor.homePageIcons),
                        SizedBox(width: 10),
                        Icon(Icons.calendar_today_outlined,
                            size: 20, color: color.AppColor.homePageIcons),
                        SizedBox(width: 13),
                        Icon(Icons.arrow_forward_ios,
                            size: 20, color: color.AppColor.homePageIcons),
                      ],
                    )
                  ],
                ),
                SizedBox(
                  height: 30,
                ),
                Row(
                  children: [
                    Text('Your program',
                        style: TextStyle(
                            fontSize: 20,
                            color: color.AppColor.homePageSubtitle,
                            fontWeight: FontWeight.w700)),
                    Expanded(child: Container()),

                    /// GestureDetector 使用点击无水波纹出现，InkWell可以实现水波纹效果
                    /// 参考 https://blog.csdn.net/shanghaibao123/article/details/107690543
                    GestureDetector(
                      onTap: () async {
                        // await Navigator.push(context,MaterialPageRoute(builder: (context){
                        //   return VideoInfo();
                        // }));
                        final data = await Navigator.pushNamed(
                            context, "/training/videoInfo");
                        print(data);
                      },
                      child: Row(
                        children: [
                          Text('Details',
                              style: TextStyle(
                                fontSize: 20,
                                color: color.AppColor.homePageDetail,
                              )),
                          SizedBox(width: 5),
                          Icon(Icons.arrow_forward,
                              size: 20, color: color.AppColor.homePageIcons),
                        ],
                      ),
                    ),
                  ],
                ),
                Container(
                    margin: const EdgeInsets.only(top: 20),
                    padding: const EdgeInsets.only(
                      left: 20,
                      top: 25,
                      right: 20,
                    ),
                    width: MediaQuery.of(context).size.width,
                    height: 220,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(10),
                            bottomLeft: Radius.circular(10),
                            bottomRight: Radius.circular(10),
                            topRight: Radius.circular(80)),
                        gradient: LinearGradient(
                            begin: Alignment.bottomLeft,
                            end: Alignment.centerRight,
                            colors: [
                              color.AppColor.gradientFirst.withOpacity(0.8),
                              color.AppColor.gradientSecond.withOpacity(0.9),
                            ]),
                        boxShadow: [
                          BoxShadow(
                              offset: Offset(5, 10),
                              blurRadius: 20,
                              color: color.AppColor.gradientSecond
                                  .withOpacity(0.2))
                        ]),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Next workout',
                          style: TextStyle(
                              fontSize: 16,
                              color: color.AppColor.homePageContainerTextSmall),
                        ),
                        SizedBox(
                          height: 5,
                        ),
                        Text(
                          'Legs Toning',
                          style: TextStyle(
                              fontSize: 25,
                              color: color.AppColor.homePageContainerTextBig),
                        ),
                        SizedBox(
                          height: 3,
                        ),
                        Text(
                          'and Glutes Workout',
                          style: TextStyle(
                              fontSize: 25,
                              color: color.AppColor.homePageContainerTextBig),
                        ),
                        SizedBox(
                          height: 25,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            Row(
                              children: [
                                Icon(Icons.timer,
                                    size: 20,
                                    color: color
                                        .AppColor.homePageContainerTextSmall),
                                SizedBox(
                                  width: 10,
                                ),
                                Text(
                                  '60 min',
                                  style: TextStyle(
                                      fontSize: 14,
                                      color: color
                                          .AppColor.homePageContainerTextSmall),
                                ),
                              ],
                            ),
                            Container(
                              child: Icon(
                                Icons.play_circle_fill,
                                color: Colors.white,
                                size: 60,
                              ),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(60),
                                  boxShadow: [
                                    BoxShadow(
                                      offset: Offset(4, 9),
                                      blurRadius: 20,
                                      color: color.AppColor.gradientFirst,
                                    )
                                  ]),
                            ),
                          ],
                        ),
                      ],
                    )),
                Container(
                    margin: const EdgeInsets.only(top: 30),
                    child: CustomStack()),
                Container(
                    margin: EdgeInsets.only(top: 20, bottom: 15),
                    alignment: Alignment.topLeft,
                    child: Text("Area of focus",
                        style: TextStyle(
                            fontSize: 25,
                            fontWeight: FontWeight.w500,
                            color: color.AppColor.homePageTitle))),
                Expanded(child: BottomList())
              ],
            )));
  }
}

class CustomStack extends StatefulWidget {
  @override
  _CustomStackState createState() => _CustomStackState();
}

class _CustomStackState extends State<CustomStack> {
  final GlobalKey _stackKey = GlobalKey();

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      key: _stackKey,
      clipBehavior: Clip.none,
      children: [
        Container(
          width: MediaQuery.of(context).size.width,
          height: 120,
          decoration: BoxDecoration(
              // shape: BoxShape.circle, // 画圆
              // border: Border.all(color: Colors.red),
              borderRadius: BorderRadius.circular(20),
              image: DecorationImage(
                  image: AssetImage(
                    "images/training/card.png",
                  ),
                  fit: BoxFit.fill),
              boxShadow: [
                BoxShadow(
                    blurRadius: 40,
                    offset: Offset(8, 10),
                    color: color.AppColor.gradientSecond.withOpacity(0.3)),
                BoxShadow(
                    blurRadius: 10,
                    offset: Offset(-1, -5),
                    color: color.AppColor.gradientSecond.withOpacity(0.3))
              ]),
        ),
        Positioned(
            left: 15,
            top: -16,
            child: Image.asset(
              "images/training/figure.png",
              width: 120,
            )),

        /// 打印 stack 的size
        // ElevatedButton(onPressed: (){
        //   print(_stackKey.currentContext?.findRenderObject()?.paintBounds?.size);
        // }, child: Text('globalKey')),
        // Container(
        //     width: (_stackKey.currentContext
        //         ?.findRenderObject()
        //         ?.paintBounds
        //         .size
        //         .width)  ,
        //     height: _stackKey.currentContext
        //         ?.findRenderObject()
        //         ?.paintBounds
        //         .size
        //         .height,
        //     color: Colors.blue.withOpacity(0.2)
        // ),
        Positioned(
          right: 0,
          top: 0,
          child: Container(
              padding: EdgeInsets.only(top: 10, bottom: 10, right: 10),
              width: 180,
              height: _stackKey.currentContext
                  ?.findRenderObject()
                  ?.paintBounds
                  .size
                  .height,
              // color: Colors.blue.withOpacity(0.2),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('You are doing great',
                      style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: color.AppColor.homePageDetail)),
                  SizedBox(
                    height: 10,
                  ),
                  RichText(
                      text: TextSpan(
                          text: "keep it up\n",
                          style: TextStyle(
                            color: color.AppColor.homePagePlanColor,
                            fontSize: 16,
                          ),
                          children: [TextSpan(text: 'stick to your plan')]))
                ],
              )),
        )
      ],
    );
  }
}

class BottomList extends StatefulWidget {
  @override
  _BottomListState createState() {
    return _BottomListState();
  }
}

class _BottomListState extends State<BottomList> {
  List _info = [];
  @override
  void initState() {
    _getInfoData();
    super.initState();
  }

  _getInfoData() {
    DefaultAssetBundle.of(context)
        .loadString("lib/pages/training/json/info.json")
        .then((value) {
      setState(() {
        _info = json.decode(value);
      });
    });
  }

  _item(title, image) {
    return Container(
        width: 140,
        height: 140,
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.all(6),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                  blurRadius: 3,
                  offset: Offset(5, 5),
                  color: color.AppColor.gradientSecond.withOpacity(0.1)),
              BoxShadow(
                  blurRadius: 3,
                  offset: Offset(-5, -5),
                  color: color.AppColor.gradientSecond.withOpacity(0.1))
            ],
            image: DecorationImage(
                // fit: BoxFit.fill,
                image: AssetImage(image))),
        child: Text(
          title,
          style: TextStyle(fontSize: 20, color: color.AppColor.homePageDetail),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        padding: EdgeInsets.all(0),
        itemCount: (_info.length.toDouble() / 2).toInt(),
        itemBuilder: (context, i) {
          final index = i * 2;
          final obj1 = _info[index];
          final obj2 = _info[index + 1];
          return Padding(
              padding:
                  EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 20),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    _item(obj1['title'], obj1['image']),
                    _item(obj2['title'], obj2['image'])
                  ]));
        });
  }
}
